import {ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View} from "react-native";
import {Image} from "expo-image";
import avator from "@/assets/images/me/avator.png";
import AntDesign from '@expo/vector-icons/AntDesign';
import emoIcon from "@/assets/images/releaseImg/emoIcon.png"

const commentComponent = function () {
    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={styles.commentContainer}>
                {
                    [0,1,2,3,4,5,6].map(() => {
                        return (
                            <View style={styles.commmentItem}>
                                <View style={styles.leftAvator}>
                                    <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                </View>
                                <View style={styles.commentRight}>
                                    <View style={styles.nickname}>
                                        <Text style={styles.nicknameText}>糖果罐子</Text>
                                    </View>
                                    <View style={styles.commentContent}>
                                        <Text style={styles.commentContentText}>
                                            弹弹堂是999的!改名了叫saku哈哈有空一起玩
                                            改名了叫saku哈哈有空一起玩
                                            改名了叫saku哈哈有空一起玩
                                        </Text>
                                    </View>
                                    <View style={styles.commentFooter}>
                                        <View style={styles.date}>
                                            <Text style={styles.dateText}>昨天22:51</Text>
                                        </View>
                                        <TouchableOpacity>
                                            <View style={styles.reply}>
                                                <Text style={styles.replyText}>回复</Text>
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                    <View style={styles.replyInfo}>
                                        <View style={styles.replyAvator}>
                                            <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={{ marginLeft: 8, marginTop: 2, }}>
                                            <View style={styles.nickname}>
                                                <Text style={styles.nicknameText}>
                                                    糖果罐子<AntDesign name="caretright" size={9} color="#9C9EAC" /> <Text style={styles.nicknameText}>下次再聊</Text>
                                                </Text>
                                            </View>
                                            <View style={[styles.commentContent, { paddingRight: 80 }]}>
                                                <Text style={[styles.commentContentText]}>
                                                    弹弹堂是999的!改名了叫saku哈哈有空一起玩改名了叫saku哈哈有空一起玩
                                                </Text>
                                            </View>
                                            <View style={styles.commentFooter}>
                                                <View style={styles.date}>
                                                    <Text style={styles.dateText}>昨天22:51</Text>
                                                </View>
                                                <TouchableOpacity>
                                                    <View style={styles.reply}>
                                                        <Text style={styles.replyText}>回复</Text>
                                                    </View>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                    <TouchableOpacity>
                                        <View style={styles.moreContainer}>
                                            <View style={styles.heng}></View>
                                            <Text style={styles.moreText}>展开更多</Text>
                                            <AntDesign name="down" size={12} color="#9C9EAC" />
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        )
                    })
                }
            </ScrollView>
            <View style={styles.inptContainer}>
                <View style={styles.inptWrap}>
                    <TextInput placeholder="发条有爱的留言" style={styles.inpt}/>
                    <TouchableOpacity>
                        <View style={styles.emoIcon}>
                            <Image source={emoIcon} style={{ width: "100%", height: "100%" }} />
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.sendBtn}>
                    <Text style={styles.sendBtnText}>发送</Text>
                </View>
            </View>
        </View>
    )
};

const styles = StyleSheet.create({
    commentContainer: {
        paddingHorizontal: 12,
        marginTop: 12,
        flex: 1,
    },
    commmentItem: {
        flexDirection: "row",
        marginBottom: 19,
    },
    leftAvator: {
        width: 35,
        height: 35,
        borderRadius: 50,
    },
    commentRight: {
        marginLeft: 8,
    },
    nickname: {},
    nicknameText: {
        color: "#C0C3CE",
        fontSize: 12,
        flexDirection: "row",
        alignItems:"center"
    },
    commentContent: {
        marginTop: 7,
        marginBottom: 10,
        paddingRight: 50,
    },
    commentContentText: {
        color: "#2A2B30",
        fontSize: 14,
    },
    commentFooter: {
        flexDirection: "row",
        alignItems: "center",
    },
    date: {
    },
    dateText: {
        fontSize: 12,
        color: "#9C9EAC"
    },
    reply: {
        marginLeft: 8,
    },
    replyAvator: {
        width: 20,
        height: 20,
        borderRadius: 50,
    },
    replyText: {
        fontSize: 12,
        color: "#2A2B30",
    },
    replyInfo: {
        flexDirection: "row",
        marginTop: 14,
    },
    moreContainer: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 12,
    },
    heng: {
        width: 18,
        height: 0.5,
        backgroundColor: "#9C9EAC"
    },
    moreText: {
        color: "#9C9EAC",
        fontSize: 12,
        marginLeft: 5,
    },
    inptContainer: {
        backgroundColor: "#fff",
        paddingBottom: 39,
        paddingTop: 10,
        flexDirection: "row",
        alignItems: "center",
    },
    emoIcon: {
        width: 22,
        height: 22,
    },
    inptWrap: {
        flexDirection: "row",
        backgroundColor: "#F7F8F9",
        marginHorizontal: 12,
        borderRadius: 8,
        paddingHorizontal: 12,
        paddingVertical: 10,
        flex: 1,
    },
    inpt: {
        flex: 1,
    },
    sendBtn: {
        width: 52,
        height: 30,
        backgroundColor: "#EC6138",
        borderRadius: 6,
        flexDirection: "row",
        justifyContent: "center",
        alignItems:"center",
        marginRight: 12,
    },
    sendBtnText: {
        color: "#fff",
    },
});

export default commentComponent;
